import React, { lazy, Suspense, useEffect } from 'react';
import { Routes, Route, Navigate, useNavigate } from 'react-router-dom';
import { notification } from 'antd';

import Login from '@/pages/login/index';
import Layout from '@/layout/index';
import { routersData } from '@/router/config';
import PersonInfo from '@/pages/person_info';
import ExamSelect from '@/pages/exam_select';
import Exam from '@/pages/exam';
import ExamHistory from '@/pages/exam_history';
import ReadExam from '@/pages/read_exam';
import CorretExamList from '@/pages/corret_exam_list';
import CorretExam from '@/pages/corret_exam';
// import StudentManage from '@/pages/student_manage';
import SubjectManage from '@/pages/subject_manage';
// import SubjectAdd from '@/pages/subject_add';
import AdminManage from '@/pages/admin_manage';
import { useAppDispatch } from '@/redux/index';
import { get_user_info } from '@/redux/slice/user';
import EventBus from '@/utils/event';
import { logout } from '@/api/request';

//分包处理
const AsyncSubjectAdd = lazy(
  () => import(/* webpackChunkName: "subject_add" */ './pages/subject_add'),
);
const AsyncStudentManage = lazy(
  () => import(/* webpackChunkName: "student_manage" */ './pages/student_manage'),
);

function SubjectAdd() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AsyncSubjectAdd />
    </Suspense>
  );
}
function StudentManage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AsyncStudentManage />
    </Suspense>
  );
}

const App: React.FC = () => {
  const dispatch = useAppDispatch();
  const navigate = useNavigate();

  const openNotification = (msg: string) => {
    notification.error({
      message: '发生错误',
      description: `错误信息：${msg}`,
      duration: 2,
    });
  };

  useEffect(() => {
    dispatch(get_user_info());

    //错误组件示例
    // throw Error('xxx');

    //没登录的处理
    EventBus.on('global_not_login', (msg) => {
      navigate('/login');
      openNotification(msg);
    });

    //业务错误
    EventBus.on('global_error_tips', (msg) => {
      openNotification(msg);
    });

    //没有权限的处理
    EventBus.on('global_error_auth', (msg) => {
      openNotification(msg);
      logout().then(() => {
        navigate('/login');
      });
    });
  }, []);
  return (
    <Routes>
      {/* 路由访问/的时候跳转到登录页 */}
      <Route path="/" element={<Navigate to={'/login'} />}></Route>
      {/* 页面1 登录页面 */}
      <Route path={routersData.login.path} element={<Login />} />

      <Route element={<Layout />}>
        {/* 页面2 个人信息录入页面*/}
        <Route path={routersData.person_info.path} element={<PersonInfo />} />
        {/* 页面3 考试选择页面*/}
        <Route path={routersData.exam_select.path} element={<ExamSelect />} />
        {/* 页面4 考试页面*/}
        <Route path={routersData.exam.path} element={<Exam />} />
        {/* 页面5 学生考试记录页面*/}
        <Route path={routersData.exam_history.path} element={<ExamHistory />} />
        {/* 页面6 查看试卷页面*/}
        <Route path={routersData.read_exam.path} element={<ReadExam />} />
        {/* 页面7 批阅试卷列表页面*/}
        <Route path={routersData.corret_exam_list.path} element={<CorretExamList />} />
        {/* 页面8 批改试卷页面*/}
        <Route path={routersData.corret_exam.path} element={<CorretExam />} />
        {/* 页面9 学生管理页面*/}
        <Route path={routersData.student_manage.path} element={<StudentManage />} />
        {/* 页面10 课程管理页面*/}
        <Route path={routersData.subject_manage.path} element={<SubjectManage />} />
        {/* 页面11 考题录入页面*/}
        <Route path={routersData.subject_add.path} element={<SubjectAdd />} />
        {/* 页面12 管理员管理*/}
        <Route path={routersData.admin_manage.path} element={<AdminManage />} />
      </Route>
    </Routes>
  );
};

export default App;
